<!--<template>-->
  <!--<div class="container-fluid H100 root" v-on:dragover.prevent v-on:drop.prevent="onDrop" v-on:click="debug">-->
    <!--<div v-for="(item, i) in items" :key="i" v-on:click="selectRow(i)">-->
      <!--<draggable element="div" v-model="item.data" :options="dragOptions" :move="onMove" @start="onStart" @end="isDragging=false">-->
        <!--<transition-group class="row" type="transition" :name="'flip-list'" :class="{ rowSel: rowSelIndex===i && rowSelMode }">-->
          <!--<div v-for="d in item.data" :class="['col-'+d.col, 'node']" :key="d.id" v-on:click="selectView(d.id)">-->
            <!--&lt;!&ndash;具体绘图容器&ndash;&gt;-->
            <!--<slot :data="d" :sel="d.id===viewSelId"></slot>-->
          <!--</div>-->
        <!--</transition-group>-->
      <!--</draggable>-->
    <!--</div>-->
  <!--</div>-->
<!--</template>-->

<!--<script>-->
<!--import draggable from 'vuedraggable';-->
<!--import Chart from '../chart/chart';-->
<!--import Bar from '../chart/bar';-->
<!--import Line from '../chart/line';-->

<!--export default {-->
  <!--name: 'Center',-->
  <!--components: {-->
    <!--draggable-->
  <!--},-->
  <!--data: function () {-->
    <!--return {-->
      <!--cacheDrag: {-->
        <!--src: '',-->
        <!--to: ''-->
      <!--},-->
      <!--count: 0,-->
      <!--editable: true,-->
      <!--delayedDragging: false,-->
      <!--rowSelMode: false,-->
      <!--rowSelIndex: -1,-->
      <!--viewSelId: '',-->
      <!--items: [-->
        <!--{-->
          <!--data: [{id: 'v1', col: '6'}, {id: 'v2', col: '6'}]-->
        <!--}-->
      <!--]-->
    <!--}-->
  <!--},-->
  <!--mounted: function () {-->
    <!--Bar.draw('v2');-->
    <!--Line.draw('v1');-->
  <!--},-->
  <!--methods: {-->
    <!--// 用于拖拽时即选中-->
    <!--onStart: function (event) {-->
      <!--var id = $(event.target).find('.view').attr('id');-->
      <!--if (id !== '') this.viewSelId = id;-->
      <!--this.isDragging = true;-->
    <!--},-->
    <!--onMove: function ({relatedContext, draggedContext}) {-->
      <!--const relatedElement = relatedContext.element;-->
      <!--const draggedElement = draggedContext.element;-->
      <!--this.cacheDrag.src = relatedElement.id;-->
      <!--this.cacheDrag.to = draggedElement.id;-->

      <!--return (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed;-->
    <!--},-->
    <!--onDrop: function (ev) {-->
      <!--var str = ev.dataTransfer.getData('Text');-->
      <!--if (str.indexOf('visual') === -1) {-->
        <!--return;-->
      <!--}-->
      <!--// 确定来源为容器-->
      <!--var id = 'view' + (++this.count) + '_';-->
      <!--var sps = str.replace('visual', '').split(' ');-->
      <!--var cols = sps.filter(function (d) { return d !== ''; })-->
        <!--.map(function (d, i) {-->
          <!--return { 'id': id + i, 'col': parseInt(d) };-->
        <!--});-->
      <!--this.items.push({-->
        <!--data: cols-->
      <!--});-->
      <!--this.rowSelIndex = this.items.length - 1;-->
    <!--},-->
    <!--selectRow: function (i) {-->
      <!--this.rowSelIndex = i;-->
      <!--// console.log(i);-->
    <!--},-->
    <!--selectView: function (id) { // event-->
      <!--if (id) {-->
        <!--if (id in Chart.instances) Chart.current.id = id;-->
        <!--this.viewSelId = id;-->
      <!--}-->
    <!--},-->
    <!--debug: function () {-->
      <!--this.items.map(function (d) {-->
        <!--// console.log(d);-->
      <!--});-->

    <!--}-->
  <!--},-->
  <!--computed: {-->
    <!--dragOptions: function () {-->
      <!--return {-->
        <!--animation: 150,-->
        <!--group: 'description',-->
        <!--disabled: !this.editable,-->
        <!--ghostClass: 'ghost',-->
        <!--dragClass: 'dragClass'-->
      <!--};-->
    <!--}-->
  <!--},-->
  <!--watch: {-->
    <!--isDragging: function (newValue) {-->
      <!--if (newValue) {-->
        <!--this.delayedDragging = true;-->
        <!--return;-->
      <!--}-->
      <!--this.$nextTick(() => {-->
        <!--this.delayedDragging = false;-->
      <!--})-->
    <!--}-->
  <!--}-->
<!--}-->

<!--</script>-->

<!--<style scoped>-->
  <!--.node{ min-height: 400px; margin:0px; padding:1px;border: 1px solid #eeeeee; }-->
  <!--.f{ float: left }-->
  <!--.rowSel{ border:1px solid #28a745 }-->
  <!--.root{ padding-top:5px; }-->
  <!--.ghost{ opacity:1; background-color: #eee }-->
  <!--.dragClass { opacity:1; border:1px solid #a94442; background-color: #ddd }-->
<!--</style>-->
